<template>
	<view class="comp-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<view class="bar-item" @click="changType(0)">
				<text :class="index === 0 ? 'text-choose' : 'text-unchoose'">推荐</text>
				<view :class="index === 0 ? 'indicator-choose' : 'indicator-unchoose'"></view>
			</view>
			<view class="bar-item" @click="changType(1)">
				<text :class="index === 1 ? 'text-choose' : 'text-unchoose'">关注</text>
				<view :class="index === 1 ? 'indicator-choose' : 'indicator-unchoose'"></view>
			</view>
		</view>
		<swiper class="swiper-box" :indicator-dots="false" :current="index" disable-touch="true" :duration="0">
			<swiper-item>
				<social-list :dynamicList="recommendDynamic" :showVisits="false" :safeBottom="safeBottom" :type="0">
				</social-list>
			</swiper-item>
			<swiper-item>
				<social-list :dynamicList="followDynamic" :showVisits="passiveList.length > 0"
					:passiveList="passiveList" :safeBottom="safeBottom" :type="1"></social-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import socialList from './socialList.vue'

	export default {
		name: "social",
		components: {
			socialList
		},
		data() {
			return {
				index: 0,
				recommendDynamic: [],
				recommendDynamicPageNum: 1,
				followDynamic: [],
				followDynamicPageNum: 1,
				safeTop: 0,
				safeBottom: 0,
				passiveList: []
			};
		},
		mounted() {
			this.initData();
			uni.$on('dynamicClick', (dynamic) => {
				this.dynamicClick(dynamic);
			});
			uni.$on('followUser', (dynamic) => {
				this.followUser(dynamic);
			})
		},
		methods: {
			changType(type) {
				this.index = type;
			},
			dynamicClick(dynamic) {
				let index = this.recommendDynamic.findIndex(item => item === dynamic);
				if (index !== -1) {
					this.recommendDynamic[index].click = !this.recommendDynamic[index].click;
				}
				index = this.followDynamic.findIndex(item => item === dynamic);
				if (index !== -1) {
					this.followDynamic[index].click = !this.followDynamic[index].click;
				}
			},
			followUser(dynamic) {
				let index = this.recommendDynamic.findIndex(item => item === dynamic);
				if (index !== -1) {
					this.recommendDynamic[index].follow = true;
				}
			},
			initData() {
				this.safeTop = this.$safeTop;
				this.safeBottom = this.$safeBottom;
				this.getRecommendDynamic('refresh');
				this.getFollowDynamic('refresh');
				this.getPassiveList();
			},
			getRecommendDynamic(type) {
				const params = {
					pageSize: 50,
					pageNum: this.recommendDynamicPageNum
				}
				this.$apis.getRecommendDynamic(params).then((res) => {
					if (res.code === 0) {
						this.recommendDynamic = res.data.list;
					}
				});
			},
			getFollowDynamic(type) {
				const params = {
					pageSize: 50,
					pageNum: this.followDynamicPageNum
				}
				this.$apis.getFollowDynamic(params).then((res) => {
					if (res.code === 0) {
						this.followDynamic = res.data.list;
					}
				});
			},
			getPassiveList() {
				const params = {
					pageSize: 5,
					pageNum: 1,
					isPassive: false
				}
				this.$apis.getPassiveList(params).then(res => {
					if (res.code === 0) {
						this.passiveList = res.data.list;
					}
				});
			},
			indexChange(e) {
				this.index = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.comp-box {
		width: 100vw;
		height: 100%;

		.navigator-bar {
			width: 100vw;
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.bar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20rpx 0 20rpx;

				.text-choose {
					font-size: 40rpx;
					font-weight: bold;
					color: #222222;
				}

				.text-unchoose {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
				}

				.indicator-choose {
					width: 40rpx;
					height: 8rpx;
					background: #FF5E2E;
					border-radius: 4rpx;
				}

				.indicator-unchoose {
					width: 40rpx;
					height: 8rpx;
				}
			}
		}

		.swiper-box {
			width: 100%;
			height: 100%;
		}
	}
</style>
